<template>
  <div @click.self="closeMask" class="x-house" :style="{ height: `${deviceH}px` }">
    <div v-if="isShowCtx &&!isShowFloor" class="house-ctx" :style="{ 'background-image': `url(${modelBg})` }">
      <div class="ctx-title">实有房屋</div>
      <div class="ctx-info">
        <div class="info-item">
          <div class="item-rs" style="width:275px;">
            <div class="rs-content" style="width:100%">
              <div style="display:flex;padding-bottom:20px">
                <div>
                  <img src="@/assets/images/loudong.png" alt style="width:86px;height:55px;" />
                </div>

                <div style="padding-left:10px;">
                  <div style="font-size:22px">{{ baseFloorInfo.resultname }}</div>
                  <div
                    style="font-size:18px;text-align: left;padding-top:4px;"
                  >{{ baseFloorInfo.itmes[0].value }}栋</div>
                </div>
              </div>
              <div style="display:flex;">
                <div style="margin:0 12px">
                  <img src="@/assets/images/fangwu.png" alt style="width:62px;height:55px;" />
                </div>

                <div style="padding-left:10px;">
                  <div style="font-size:22px">社区房屋总数</div>
                  <div
                    style="font-size:18px;text-align: left;padding-top:4px;"
                  >{{ baseHouseInfo.itmes[0].value }}套</div>
                </div>
              </div>
            </div>
          </div>
          <div class="item-rs-pie">
            <div class="item-name" style="text-align:center;color:#56FFFA">自住房屋数</div>
            <div class="item-pie">
              <x-pie id="zizhu" :data="zizhu" v-if="zizhu.length > 0" color="#68E0CF" />
            </div>
          </div>
          <div class="item-rs-pie">
            <div class="item-name" style="text-align:center;color:#56FFFA">出租房屋数</div>
            <div class="item-pie">
              <x-pie id="chuzu" :data="chuzu" v-if="chuzu.length > 0" color="#209CFF" />
            </div>
          </div>
          <div class="item-rs-pie">
            <div class="item-name" style="text-align:center;color:#56FFFA">群租房屋数</div>
            <div class="item-pie">
              <x-pie id="qunzu" :data="qunzu" v-if="qunzu.length > 0" color="#DEA55C" />
            </div>
          </div>
          <div class="item-rs-pie">
            <div class="item-name" style="text-align:center;color:#56FFFA">空置房屋数</div>
            <div class="item-pie">
              <x-pie id="kongzhi" :data="kongzhi" v-if="kongzhi.length > 0" color="#E16757" />
            </div>
          </div>
        </div>
        <div class="info-item">
          <div style="display:flex;">
            <div style="flex:1;margin:0 50px;">
              <div class="item-name" style="color:#56FFFA">各房屋用途占比</div>
              <div class="item-pie" style="width:400px;height:200px">
                <x-line
                  id="housein"
                  mapType="housein"
                  :xData="inXData"
                  type="housein"
                  :data="inYData"
                />
              </div>

              <!-- <x-pie id="housetotal" :data="houseTotal.itmes" /> -->
            </div>
            <div style="margin-left:100px;flex:2">
              <div class="item-name" style="color:#56FFFA">房屋建筑形式占比</div>
              <div class="item-pie" style="width:500px;height:200px">
                <x-line2
                  v-if="roomnames.length > 0"
                  id="houserooms"
                  :xData="roomnames"
                  type="housein"
                  :roomnums="roomnums"
                />
              </div>
            </div>
          </div>
        </div>
        <div class="item-name" style="color:#56FFFA;margin-top: 60px;padding-left:20px;text-align: left;">楼栋自住/出租统计</div>
        <div class="info-item" style="margin-top:50px;">

          <x-line3 id="housemaps"
            :xData="bottomlineData"
            :zizhuDatas="zizhuDatas"
            :chuzuDatas="chuzuDatas"
            mapType="housein"
            @loudong="handleInfo"
            ></x-line3>
          <!-- <x-line1
            id="housemaps"
            :bottomlineData="bottomlineData"
            :zizhuDatas="zizhuDatas"
            :chuzuDatas="chuzuDatas"
          /> -->
          <!-- <div id="housemaps" ref="housemaps" style="width: 813px;height: 300px;"></div> -->
        </div>
      </div>
      <!-- <div class="info-item">
        <div id="housemaps" ref="housemaps" style="width: 813px;height: 300px;"></div>
      </div>-->
      <!-- <div class="ctx-footer">
       <div id="main" style="width: 813px;height: 300px;"></div>
      </div>-->
    </div>
    <x-floor @closeMask="closeMask1()" v-if="isShowFloor"  :code="code" :name="nv" :id="id" />
  </div>
</template>
<script>
import XPie from "@/components/xhousepie";
import XLine from "@/components/xhouseline";
import XLine1 from "@/components/xhouseline/index1";
import XLine2 from "@/components/xhouseline/index2";
import XLine3 from "@/components/xline/index";
import XCategory from "@/components/xhousecategory";
import { GetRoomInfo } from "@/api/peopleApi";
import DeviceItem from "@/components/deviceitem";
import loudong from './data.json';
import XFloor from "@/components/xfloormodel";
export default {
  name: "xhousemodel",
  props: {
    id: {
      type: String,
      default: ""
    },
    code: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      modelBg: require("@/assets/images/modelBg.png"),
      isShowCtx: false,
      deviceH: 0,
      baseHouseInfo: {},
      baseFloorInfo: {},
      houseTotal: {},
      houseRent: {},
      inXData: [],
      inYData: [],
      houseIn: {},
      outXData: [],
      houseOut: {},
      timeXData: [],
      houseYear: {},
      zizhu: [],
      zhuzu: [],
      qunzu: [],
      kongzhi: [],
      bottomlineData: [],
      zizhuDatas: [],
      chuzuDatas: [],
      roomnames: [],
      roomnums: {},
      id:"",
      nv:{},
      isShowFloor:false
    };
  },
  components: {
    XPie,
    XLine,
    XCategory,
    XLine1,
    XLine2,
    XLine3,
    XFloor
  },
  beforeMount() {
    let h = document.documentElement.clientHeight || document.body.clientHeight;
    this.deviceH = h;
  },
  mounted() {
    this.GetRoomData();
    // this.getsqld();
    // let echarts = document.getElementById("housemaps");
    // let echarts1 = this.$refs.housemaps;
    // console.log('mounted')
    // console.log(echarts);
  },
  methods: {
    closeMask1(){
      this.isShowFloor=false
    },
    handleInfo(i){
      console.log('loudonginfo:')
      console.log(i)
      if(i=='19号'){
        return false
      }
      loudong.map(item=>{
        if(item.name==i){
          this.id=item.id
          this.nv={
            buildnum:i.replace('号',''),
            name:i+"楼"
          }
          this.isShowFloor=true
          console.log(item.id)
        }
      })
    },
    async GetRoomData() {
      try {
        let params = {
          id: this.id,
          code: this.code
        };
        const res = await GetRoomInfo(params);
        console.log(res);
        this.baseHouseInfo = res[0];
        this.baseFloorInfo = res[1];
        // this.houseTotal = res[2]; //房屋占比
        this.houseTotal = res[2].itmes.reduce((a, b) => {
          return a + b.value;
        }, 0);
        console.log(this.houseTotal);
        this.zizhu = [
          res[2].itmes[0],
          { name: "total", value: this.houseTotal - res[2].itmes[0].value }
        ];
        console.log(this.zizhu);
        this.chuzu = [
          res[2].itmes[1],
          { name: "total", value: this.houseTotal - res[2].itmes[1].value }
        ];
        this.qunzu = [
          res[2].itmes[2],
          { name: "total", value: this.houseTotal - res[2].itmes[2].value }
        ];
        this.kongzhi = [
          res[2].itmes[3],
          { name: "total", value: this.houseTotal - res[2].itmes[3].value }
        ];
        this.houseRent = res[3]; //房屋建筑形式占比

        // this.houseIn = res[4]; //12月入住占比
        // console.log(res[2].itmes);
        this.inXData = res[2].itmes.map(el => el.name);
        this.inYData = res[2].itmes.map(el => el.value);
        // this.inXData = res[4].itmes.map(el => el.resultname);
        // this.houseOut = res[5];
        // this.outXData = res[5].itmes.map(el => el.resultname);
        // this.houseYear = res[6];
        // this.bottomlineData = res[4].itmes.map(el => el.resultname);
        // this.bottomlineData=res[4].itmes.map()
        let bottomlineData=[]
        let zizhuDatas=[]
        let chuzuDatas=[]
        for(var i in res[4].itmes){
          if(i%2==0){
            bottomlineData.push(res[4].itmes[i].objName+"楼")
            zizhuDatas.push(res[4].itmes[i].value)
          }else{
            chuzuDatas.push(res[4].itmes[i].value)
          }
        }
        this.bottomlineData=bottomlineData
        this.zizhuDatas =zizhuDatas
        this.chuzuDatas =chuzuDatas
        // this.zizhuDatas = res[4].itmes.map(el => el.itmes[0].value);
        // this.chuzuDatas = res[4].itmes.map(el => el.itmes[1].value);
        this.roomnames = res[3].itmes.map(el => el.resultname);
        this.roomnums.roomzizhu = res[3].itmes.map(el => el.itmes[0].value);
        this.roomnums.roomchuzu = res[3].itmes.map(el => el.itmes[1].value);
        this.roomnums.roomqunzu = res[3].itmes.map(el => el.itmes[2].value);
        this.roomnums.roomkongzhi = res[3].itmes.map(el => el.itmes[3].value);

        this.isShowCtx = true;
      } catch (error) {
        this.$message({
          type: "error",
          message: error
        });
      }
    },
    closeMask() {
      this.$emit("closeMask");
    }
  }
};
</script>
<style lang="less" scoped>
.x-house {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1000;
  .house-ctx {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 1177px;
    height: 800px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    padding: 10px 30px;
    box-sizing: border-box;

    .ctx-title {
      width: 100%;
      padding-top: 10px;
      box-sizing: border-box;
      font-family: PingFangSC-Medium;
      font-size: 24px;
      color: #e9e9e9;
      letter-spacing: 4.8px;
      text-align: center;
      box-sizing: border-box;
    }
    .ctx-info {
      width: 100%;
      // display: flex;
      // justify-content: space-around;
      // align-items: center;
      margin-top: 28px;
      .info-item {
        flex: 1;
        display: flex;
        height: 180px;
        .item-rs-pie {
          width: 200px;
          height: 200px;
        }
        .item-rs {
          width: 100%;
          height: 50%;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .rs-content {
            width: 50%;
            height: 100%;
            color: #69f1f7;
            .content-name {
              width: 100%;
              font-family: PingFangSC-Medium;
              font-size: 18px;
              color: #69d3da;
              letter-spacing: 0;
              text-align: left;
              .iconfont {
                font-size: 22px;
                margin-right: 8px;
              }
            }
            .content-number {
              font-family: Silom;
              font-size: 40px;
              margin-top: 18px;
              text-align: left;
              color: #d0b01c;
              letter-spacing: 2.22px;
              line-height: 40px;
              .unit {
                font-family: PingFangSC-Medium;
                font-size: 18px;
                color: #69d3da;
                letter-spacing: 0;
              }
            }
          }
        }
        .item-name {
          width: 100%;
          font-family: PingFangSC-Medium;
          font-size: 18px;
          color: #fff;
          letter-spacing: 0;
          text-align: left;
          .iconfont {
            font-size: 22px;
            margin-right: 8px;
          }
        }
        .item-number {
          margin-top: 20px;
          font-family: Silom;
          font-size: 40px;
          color: #d0b01c;
          letter-spacing: 2.22px;
          text-align: left;
        }
        .item-pie {
          width: 100%;
          height: 140px;
          margin-top: 10px;
          padding: 5px 0px;
          box-sizing: border-box;
          .pie-canvas {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .ctx-footer {
      width: 100%;
      margin-top: 30px;
      .footer-line {
        width: 100%;
        height: 230px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .line-item {
          flex: 1;
          height: 100%;
          .item-name {
            width: 100%;
            line-height: 30px;
            font-family: PingFangSC-Medium;
            font-size: 18px;
            color: #69d3da;
            letter-spacing: 0;
            text-align: left;
            .iconfont {
              font-size: 22px;
              margin-right: 8px;
            }
          }
          .item-rs {
            width: 100%;
            height: 200px;
          }
        }
      }
      .footer-category {
        width: 100%;
        height: 230px;
        margin-top: 25px;
        .category-name {
          width: 100%;
          font-family: PingFangSC-Medium;
          font-size: 18px;
          color: #69d3da;
          letter-spacing: 0;
          text-align: left;
        }
        .category-ctx {
          width: 100%;
          height: 200px;
        }
      }
    }
  }
}
</style>
